<!doctype html>
<html lang="en" style="width: 100%; height:100%;">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="./test/reset.css">
        <link rel="stylesheet" href="./test/demo.css">
        <title>羊群新年特别活动</title>
    </head>
    <body style="width: 90%; height:90%; margin:auto;">
        <div class="title">·羊·群·新·年·特·别·活·动·
        </div>
        <div class = "scroll">
            <ul class="list" id="demo1">
            </ul>
        </div>
        <div class="container">
            <div class = "hash-input">
                <div class = "input-list">
                    <li class="input-item">
                        <span class="input-title">【三等奖】</span>
                        <input class="input-box" type="text" id="Input3" placeholder="请输入hash值"/>
                        <button class="input-button" id ="superLucky3">开奖</button>                           
                    </li>
                    <li class="input-item">
                        <span class="input-title">【二等奖】</span>
                        <input class="input-box" type="text" id="Input2" placeholder="请输入hash值"/>
                        <button class="input-button" id = "superLucky2">开奖</button>                  
                    </li>
                    <li class="input-item">
                        <span class="input-title">【一等奖】</span>
                        <input class="input-box" type="text" id="Input1" placeholder="请输入hash值"/>
                        <button class="input-button" id = "superLucky1">开奖</button>                  
                    </li>
                    <li class="input-item">
                        <span class="input-title">【特等奖】</span>
                        <input class="input-box" type="text" id="Input0" placeholder="请输入hash值"/>
                        <button class="input-button" id = "superLucky0">开奖</button>             
                    </li>
                    <li class="input-item">
                        <a href="https://www.blockchain.com/btc/blocks?page=1">比特币信息查询</a>  
                    </li>
                </div>
            </div>
            <div class = "result" id="Output3">
                <div class = "result-title">三等奖：3名（包包+明信片）</div>
            </div>
            <div class = "result" id="Output2">
                <div class = "result-title">二等奖：2名（手帐+明信片）</div>
            </div>
            <div class = "result" id="Output1">
                <div class = "result-title">一等奖：1名（手帐+包包+明信片）</div>
            </div>
            <div class = "result" id="Output0">
                <div class = "result-title">特等奖：1名（签名场刊+手帐+包包+明信片）</div>
            </div>
            
            <div class = "search">
                <div style = "margin-bottom:5px;">
                    <span class="input-title" style = "font-size:12px;">【我的座位】</span>
                    <input class="input-box" type="text" id="nameInput" placeholder="请输入微博id" style = "font-size:12px;"/>
                    <button class="input-button" style = "font-size:12px;" id="nameSearch">查询</button>
                </div>
                <div id = "nameResult">
                </div>
            </div>
        </div>

        <script src="./build/seamscroll.js"></script>
        <script>
          seamscroll.init({
            dom: document.getElementById('demo1')
          })
        </script>
        <script src="./build/sha256.js"></script>
        <script src="./build/data.js"></script>
        <script language="javascript">
            var html = [];
            var nAll = data.length;
            var nameAll = []
            for (var i = 0; i < data.length; i++) {
                html.push('<li class="clearfix">' +'<span class="title1">'+data[i].id+'-'+data[i].seatname+'</span><span class="date">'+data[i].name+'</span>'+ '</li>');
            }
            document.getElementById("demo1").innerHTML = html.join('')
            
            var superLucky = function(n,idSource,idOutput) {
                let hashid = document.getElementById(idSource).value
                let retName = []
                let target_id,ret
                let outhtml = []
                outhtml.push(document.getElementById(idOutput).innerHTML)

                while (retName.length < n) {
                    target_id = calcMod(sha256(hashid),nAll);
                    hashid = sha256(hashid)
                    ret = data.filter(x=>(x.id == target_id))[0]
                    if (retName.indexOf(ret.name) == -1 && nameAll.indexOf(ret.name) == -1) {
                        retName.push(ret.name)
                        nameAll.push(ret.name)
                        outhtml.push('<div class = "result0">'+ret.seatname.split("-")[0]+'</br>'+ret.name+'</div>')
                    }
                }
                document.getElementById(idOutput).innerHTML = outhtml.join('')
            }
            var btn3 = document.getElementById("superLucky3")
            var btn2 = document.getElementById("superLucky2")
            var btn1 = document.getElementById("superLucky1")
            var btn0 = document.getElementById("superLucky0")
            btn3.disabled = false;
            btn2.disabled = true;
            btn1.disabled = true;
            btn0.disabled = true;

            btn3.onclick = function(){
                superLucky(3,"Input3","Output3")
                btn3.disabled = true
                btn2.disabled = false
            };
            btn2.onclick = function(){
                superLucky(2,"Input2","Output2")
                btn2.disabled = true
                btn1.disabled = false
            };
            btn1.onclick = function(){
                superLucky(1,"Input1","Output1")
                btn1.disabled = true
                btn0.disabled = false
            };
            btn0.onclick = function(){
                superLucky(1,"Input0","Output0")
                btn0.disabled = true
            };
            var searchName = function() {
                let name = document.getElementById("nameInput").value
                let ret_m = data.filter(x=>(x.name == name))
                let ret = []
                let rate = ret_m.length
                for (let item in ret_m){
                    if (ret.indexOf(ret_m[item].seatname.split("-")[0]) == -1) {
                        ret.push(ret_m[item].seatname.split("-")[0])
                    }
                }
                if (ret.length==0) {
                    document.getElementById("nameResult").innerHTML = '<span class="input-title" style = "font-size:12px;">木有找到记录诶</span>'
                } else {
                    document.getElementById("nameResult").innerHTML = '<span class="input-title" style = "font-size:12px;">'+
                    '【累计倍率】：'+ rate.toString() + '；</br>【座位明细】：'+ 
                    ret.join('/')+'；</span>'
                }
            }
            var btn_search = document.getElementById("nameSearch")
            btn_search.onclick = function(){
                searchName()
            };

            var calcMod = function(x,n) {
                
                let x_remainder = parseInt(x.substr(56,8),16) % n
                let y_remainder = 1
                let remainder = (x_remainder * y_remainder) % n
                remainder = remainder % n

                for (var i=1; i<8; i++) {
                    x_remainder = parseInt(x.substr((7-i)*8,8),16) % n
                    y_remainder = (y_remainder * ((16**8) % n)) % n
                    remainder = remainder + (x_remainder * y_remainder) % n
                    remainder = remainder % n
                }
                return remainder
            };
        </script>
    </body>
</html>